<template>
  <div class="main-toolset-container">
    <div v-for="(item, index) in toolList" :key="item.toolKey">
      <div
        class="main-tool"
        :class="{ selected: currentTool == item.toolKey }"
        @click="itemClick(item)"
      >
        <span class="tool-icon" :class="item.toolIconClass"></span>
        <span class="tool-name">{{ item.toolName }}</span>
      </div>
      <div v-if="index < toolList.length - 1" class="main-tool-split"></div>
    </div>

    <!-- <div class="main-tool" @click="mapZoomIn">
      <span class="iconfont icon-rate tool-icon"></span>
      <span class="tool-name">关注</span>
    </div>
    <div class="main-tool-split"></div>
    <div class="main-tool" @click="mapZoomOut">
      <span class="iconfont icon-list tool-icon"></span>
      <span class="tool-name">筛选</span>
    </div>
    <div class="main-tool-split"></div>
    <div class="main-tool" @click="mapZoomIn">
      <span class="el-icon-help tool-icon"></span>
      <span class="tool-name">测距</span>
    </div>
    <div class="main-tool-split"></div>
    <div class="main-tool" @click="mapZoomOut">
      <span class="el-icon-aim tool-icon"></span>
      <span class="tool-name">定位</span>
    </div> -->
  </div>
</template>
<script>
export default {
  props: {
    // 工具数组
    // 格式如：[{toolKey:"ceshi1",toolName:"测试1"，toolIconClass:"iconfont icon-rate"}]
    toolList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      currentTool: "",
    };
  },
  mounted() {},
  destroy() {},
  methods: {
    itemClick(tool) {
      this.currentTool = tool.toolKey;
      this.$emit("toolClick", tool);
    },
  },
};
</script>
<style lang="scss" scoped>
.main-toolset-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
  border-radius: 3px;
  width: 40px;
  // height: 273px;

  .main-tool {
    cursor: pointer;
    padding: 5px 0 5px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px dashed #d8d8d8;
    // &:last-child {
    //   border-bottom: none;
    // }
    color: #333333;
    font-weight: 400;
    .tool-icon {
      font-size: 19px;
      font-weight: inherit;
    }
    .tool-name {
      font-size: 12px;
      font-weight: inherit;
    }
    &:hover {
      color: #004aaa;
      font-weight: bold;
    }
  }
  .selected {
    color: #004aaa;
    font-weight: bold;
  }

  .main-tool-split {
    width: 30px;
    height: 1px;
    border-bottom: 1px dashed #d8d8d8;
  }
}
</style>
